<template>
  <div style="width: 100%; overflow-x: hidden">
    <!--   文章详情部分 -->
    <article-content :article="article"></article-content>

    <hr />
    <!--  评论 -->
    <div class="comment-list-wrap">
      <h1>评论</h1>
      <common-list
        :API="API"
        :article_id="article_id"
        :user_id="user_id"
        :limit="15"
        ref="commonlist"
      >
        <template v-slot="{ list }">
          <comment-list
            :list="list"
            @commentLikeToggle="commentLikeToggle"
            @replyMsg="replyMsg"
          ></comment-list>
        </template>

        <template #finished="{ len }">
          <div>
            <div v-if="len === 0">
              <van-empty
                class="custom-image"
                image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                description="快抢沙发"
              />
            </div>
            <div v-else>没有更多数据了</div>
          </div>
        </template>
      </common-list>
    </div>
    <!--  底部栏 -->

    <article-footer
      :article="article"
      :article_id="article_id"
      :user_id="user_id"
      :placeholder="placeholder"
      :comment_type="comment_type"
      :reply_comment_id="reply_comment_id"
      :currentIndex="currentIndex"
      ref="articlefooter"
    ></article-footer>

    <!--   回复的弹出层 -->

    <van-popup
      v-model="replyPopupShow"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
      style="border-radius: 5px 5px 0 0"
    >
      <div>
        <div class="replyPopupHeader">{{ replyInfoBus.reply_num }}条回复</div>

        <div class="replyPopupInfo">
          <li style="border: 1px solid #f00">
            <div>
              <img
                :src="replyInfoBus.info?.avatar"
                width="50"
                height="50"
                alt=""
              />
              <span>{{ replyInfoBus.info?.nickname }}</span>
            </div>
            <p>
              {{ replyInfoBus.content }}
            </p>
            <p>
              {{ replyInfoBus.create_time }}
            </p>

            <p>
              <van-icon
                :color="replyInfoBus.is_like ? 'red' : 'gray'"
                name="good-job"
                @click="
                  commentLikeToggle({
                    comment_id: replyInfoBus._id,
                    index: replyInfoBus.index,
                    is_like: replyInfoBus.is_like,
                  })
                "
              />
              {{ replyInfoBus.like_count > 0 ? replyInfoBus.like_count : "" }}
            </p>

            <p style="margin-top: 10px">回复 {{ replyInfoBus.reply_num }}</p>
          </li>
        </div>

        <div class="comment-list-wrap">
          <h1>评论</h1>
          <common-list
            :API="REPLY_API"
            :article_id="article_id"
            :reply_comment_id="reply_comment_id"
            :key="commonListKey"
            ref="commonReflist"
          >
            <template v-slot="{ list }">
              <comment-list
                :list="list"
                @commentLikeToggle="commentLikeToggle"
                @replyMsg="replyMsg"
                :is_reply="true"
              ></comment-list>
            </template>

            <template #finished="{ len }">
              <div>
                <div v-if="len === 0">
                  <van-empty
                    class="custom-image"
                    image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                    description="快抢沙发"
                  />
                </div>
                <div v-else>没有更多数据了</div>
              </div>
            </template>
          </common-list>
        </div>

        <!--   底部 -->

        <article-footer
          :article="article"
          :article_id="article_id"
          :user_id="user_id"
          :placeholder="placeholder"
          :comment_type="comment_type"
          :reply_comment_id="reply_comment_id"
          :currentIndex="currentIndex"
          ref="articlefooter"
          :is_reply="true"
        ></article-footer>
      </div>
    </van-popup>
  </div>
</template>

<style scoped>
.replyPopupHeader {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #eee;
}
</style>

<script>
import articleMixin from "./articleMixin";
import ArticleContent from "./ArticleContent.vue"; //  文章详情组件
import CommonList from "@/components/CommonList/index.vue"; //  公共上拉加载组件
import CommentList from "@/components/CommentList/index.vue"; //  评论组件
import {
  get_comment_list as API,
  get_reply_list as REPLY_API,
} from "@/api/article";
import { Empty } from "vant";
import ArticleFooter from "./articleFooter.vue";

import { comment_like, comment_unlike } from "@/api/article";

import { Popup } from "vant";

export default {
  name: "ArticleView",
  mixins: [articleMixin],
  components: {
    [ArticleContent.name]: ArticleContent,
    [CommonList.name]: CommonList,
    [CommentList.name]: CommentList,
    [ArticleFooter.name]: ArticleFooter,
    [Empty.name]: Empty,
    [Popup.name]: Popup,
  },
  data() {
    return {
      API,
      REPLY_API,
      placeholder: "请输入留言",
      comment_type: 0,
      reply_comment_id: "",
      currentIndex: 0, //  当前点击的索引值
      replyPopupShow: false,
      replyInfoBus: {}, //  回复信息的中转数据
      commonListKey: 0, //  给commenList组件加的key  刷新组件
    };
  },
  mounted() {
    // console.log(this.$refs.commonlist.list)

    this.$bus.$on("changeArticle", (index) => {
      setTimeout(() => {
        this.replyPopupShow = true;
      }, 200);
      this.article.comment++; //  角标++
      this.commonListKey++;
      this.$refs.commonlist.list[index].reply_num++;
      this.replyInfoBus.reply_num++;
    });
  },
  methods: {
    //  评论点赞/取消点赞
    commentLikeToggle({ comment_id, is_like, index, is_reply }) {
      let { user_id } = this;

      let api = is_like ? comment_unlike : comment_like;

      api({
        comment_id,
        user_id,
      }).then((res) => {
        if (res.code == 0) {
          let list = null;

          if (is_reply) {
            //  如果是回复的话
            list = this.$refs.commonReflist.list;
          } else {
            list = this.$refs.commonlist.list;
          }

          list[index].is_like = !is_like;

          list[index].like_count = res.count;

          this.replyInfoBus.like_count = res.count;
          this.replyInfoBus.is_like = !is_like;

          this.$forceUpdate();
        }

        this.$toast(res.msg);
      });
    },
    //  接收 回复列表组件子传父的数据
    replyMsg({ item }) {
      let {
        reply_num,
        info: { nickname },
        _id: reply_comment_id,
        index,
      } = item;
      let list = this.$refs.commonlist.list;

      this.commonListKey++;

      if (reply_num === 0) {
        //  当前打开评论框

        this.$refs.articlefooter.popupShow = true;
      } else {
        this.replyPopupShow = true;
      }

      this.placeholder = "回复:" + nickname;
      this.comment_type = 1;
      this.reply_comment_id = reply_comment_id;
      this.currentIndex = index;
      this.replyInfoBus = {
        index,
        ...list[index],
      };
    },
  },
};
</script>

<style>
.comment-list-wrap {
  padding-bottom: 50px;
}
</style>
